<%@ include file="header.jsp" %>
	<%@ include file="menu.jsp" %>
 <!-- <div class="content" id="content">  -->
	<div id="scheduler_here" class="dhx_cal_container" style='width:88%; height:1000px;' onclick="return startday();">
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="filters_wrapper" id="filters_wrapper">
			<span>Display:</span>
				<label>
					<input type="checkbox" name="1" />
					Planned
				</label>
				<label>
					<input type="checkbox" name="2" />
					In progress
				</label>
				<label>
					<input type="checkbox" name="3" />
					Finished
				</label>
				<label>
						<form id="filterprojecttooltip" action="/timesheet" method="post">
					 		<select multiple="multiple" id="filterproject" name="filterproject" style='width:250px; height:150px;'>
							   <c:forEach items="${plist}" var="p">
							      <option value="${p.id}" selected>${p.projectName}</option>
							   </c:forEach>
					       </select>
					       <select multiple="multiple" id="filteruser" name="filteruser" style='width:250px; height:150px;'>
			   					<c:forEach items="${ulist}" var="u">
			      					<option value="${u.id}" selected>${u.name} ${u.firstname}</option>
			    				</c:forEach>
			    		   </select>
					       <br><input type="submit" value="Filter"/>
				 		</form>
					<input id="projectbutton" type="button" value="filter"/>
				</label>
			</div>
			<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>		
	</div>
<!--</div>-->
	<script type="text/javascript">
	function init(){
		
	
	<%if(!startday){%>
		scheduler.config.readonly = true;
	<%}%>   
	    scheduler.locale.labels.timeline_tab = "Timeline";
		scheduler.locale.labels.section_custom="Section";
		scheduler.locale.labels.section_project="Project";
		scheduler.locale.labels.section_greeting = "DB reference";
		scheduler.locale.labels.section_statut = "Status";
		scheduler.locale.labels.section_cmt = "User comment";
		scheduler.config.details_on_create=true;
		scheduler.config.details_on_dblclick=true;
		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		scheduler.config.default_date = "%j %M %Y (#%W)";
		
		
		// default values for filters
		var filters = {
			1: true,
			2: true,
			3: true
		};

		var filter_inputs = document.getElementById("filters_wrapper").getElementsByTagName("input");
		for (var i=0; i<filter_inputs.length; i++) {
			var filter_input = filter_inputs[i];

			// set initial input value based on filters settings
			filter_input.checked = filters[filter_input.name];

			// attach event handler to update filters object and refresh view (so filters will be applied)
			filter_input.onchange = function() {
				filters[this.name] = !!this.checked;
				scheduler.updateView();
			}
		}

		// here we are using single function for all filters but we can have different logic for each view scheduler.filter_timeline_tab 
		scheduler.filter_month = scheduler.filter_day = scheduler.filter_week= function(id, event) {
			// display event only if its type is set to true in filters obj
			if (filters[event.statut_id]) {
				return true;
			}
			// default, do not display event
			return false;
		};
		
		var control_date = new Date();
		scheduler.templates.event_class=function(start, end, event){
            if(start<control_date && event.statut_id != '2' && event.statut_id != '3') // event start before control date
            	return "past_event";
           	else{
           		if(event.statut_id){            	
               	return "event_"+event.statut_id;
               	alert(event.statut);
               	}
           	}
            return ""; 
        };
		
		//===============
		//Configuration
		//===============
		var statut = ${statutlist};
		var sections=${userlist};
		scheduler.createTimelineView({
			name:	"timeline",
			x_unit:	"minute",
			x_date:	"%H:%i",
			x_step:	60,
			x_size: 24,
			x_start: 00,
			x_length: 40,
			y_unit:	sections,
			y_property:	"section_id",
			render:"bar"
		});
		
		var project = ${projectlist};
		console.log(project);
		
		//===============
		//Data loading
		//===============
		scheduler.config.lightbox.sections=[	
			{name:"greeting", height: 0, map_to: "hidden", type: "template"},
			{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
			{name:"cmt", height:130, map_to:"cmt", type:"textarea"},
			{name:"custom", height:23, type:"select", options:sections, map_to:"section_id"},
			{name:"project", height:23, type:"select", options:project, map_to:"project_id"},
			{name:"statut", height:23, type:"select", options:statut, map_to:"statut_id"},
			{name:"time", height:72, type:"time", map_to:"auto"}
		]
		var today = new Date();
		var yyyy = today.getFullYear();
		var dd = today.getDate();
		var mm = today.getMonth(); //January is 0!

		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		scheduler.init('scheduler_here',new Date(yyyy,mm,dd),"week");
		var actions = ${actionlist};
		scheduler.parse(actions,"json");
		
		scheduler.templates.tooltip_date_format=scheduler.date.date_to_str("%Y-%m-%d %H:%i");
		scheduler.templates.tooltip_text = function(start,end,event) {
			return "<b>User: </b> "+sections[event.section_id-1].label+"<br/><b>Project: </b> "+project[event.project_id-1].label+"<br/><b>Event: </b> "+event.text+"<br/><b>Start date: </b> "+scheduler.templates.tooltip_date_format(start)+"<br/><b>End date: </b> "+scheduler.templates.tooltip_date_format(end);
			}
		
		scheduler.attachEvent("onConfirmedBeforeEventDelete", function(event_id,event_object){
		    $.ajax({
					  type: "POST",
					  url: "/eventmanager",
					  data: {"idDb":event_object.hidden, "desc":event_object.text, "sect":event_object.section_id, "pjt":event_object.project_id, "start":convertDatumTime(event_object.start_date), "stop":convertDatumTime(event_object.end_date), "action":"delete", "status":event_object.statut_id, "cmt":event_object.cmt}
					}).done(function( msg ) {
					});
		    return true;
		});
		

		 scheduler.attachEvent("onEventChanged", function(event_id,event_object){
			 if(event_id!=null){
				 if (!event_object.text) {
						alert("Text must not be empty");
						return false;
					}
					console.log(event_object.text.length+"  "+event_object.text+"  id : "+event_id);
					if (event_object.text.length<5) {
						alert("Text too small");
						return false;
					}
					else{
					$.ajax({
						  type: "POST",
						  url: "/eventmanager",
						  data: {"idDb":event_object.hidden,"desc":event_object.text, "sect":event_object.section_id, "pjt":event_object.project_id, "start":convertDatumTime(event_object.start_date), "stop":convertDatumTime(event_object.end_date), "action":"update", "status":event_object.statut_id, "cmt":event_object.cmt}
						}).done(function( msg ) {
							if(msg!=null && msg != ""){
								var obj = JSON.parse(msg);
								var content ="";
								for(var k in obj){
									if ({}.hasOwnProperty.call(obj, k)&&k==1){
										content+= obj[k]; 
									}
								}
							alert(content);
							}
							reloadPage();
						});
					return true;
					}
			 }
			 else{return true;}
  		 })
		
		scheduler.attachEvent("onEventSave",function(id,data,is_new_event){
			if(is_new_event!=null){
				if (!data.text) {
					alert("Text must not be empty");
					return false;
				}
				console.log(data.text.length+"  "+data.text+"   "+is_new_event+"    "+id);
				if (data.text.length<5) {
					alert("Text too small");
					return false;
				}
				else{
				$.ajax({
					  type: "POST",
					  url: "/eventmanager",
					  data: {"desc":data.text, "sect":data.section_id, "pjt":data.project_id, "start":convertDatumTime(data.start_date), "stop":convertDatumTime(data.end_date), "action":"save", "status":data.statut_id, "cmt":data.cmt}
					}).done(function( msg ) {
					  reloadPage();
					});
				
				return true;
				}
			}
			else{return true;}
		})
		
	}
		function convertDatumTime(datum){
			var retour='';
			retour+=datum.getFullYear()+'-';
			
			if((datum.getMonth()+1)<10)retour +='0'+(datum.getMonth()+1);
			else retour +=(datum.getMonth()+1);
			
			retour+='-';
			
			if(datum.getDate()<10)retour +='0'+datum.getDate();
			else retour +=datum.getDate();
			
			retour+=' ';
			if(datum.getHours()<10)retour +='0'+datum.getHours();
			else retour +=datum.getHours();
			retour += ':';
			if(datum.getMinutes()<10) retour +='0'+datum.getMinutes();
			else retour +=datum.getMinutes();
			retour += ':';
			if(datum.getSeconds()<10)retour +='0'+datum.getSeconds();
			else retour +=datum.getSeconds();
			
			return retour;	
		 }
		 function reloadPage(){
			 location.reload(false);
		 }

	</script>
</body>
</html>